<template>
	<view class="wp">
		<view class="his_tit">历史回顾</view>
		<!-- <picker mode="date" fields="month" @change="changeLog">
			<view class="his_date">
				<view v-if="date!=''">{{date}}<image src="/static/zhankai.png" mode="widthFix"></image></view>
				<view v-else>月份选择</view>
			</view>
		</picker> -->
		<view class="his_list">
			<view v-for="item in list">
				<view class="his_time_tit">{{item.month}}</view>
				<view class="his_item" v-for="it in item.lives">
					<view class="flex_box">
						<view class="symbol"><view></view></view>
						<view class="his_time">{{it.date}}</view>
						<view class="his_play" @click="toPlay(it.replay_url)">
							<image src="https://img.jinghushi.com/images/0/2025/04/XTyQ8dRrPKKzCXwU1QTPDX6Y1q1v8P.png" mode="widthFix"></image>
							<view>播放</view>
						</view>
					</view>
					<view class="his_title">{{it.start_time}}-{{it.end_time}} {{it.live_name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import axiosLive from '@/store/liveBroadcastAjax.js'
	export default {
		data() {
			return {
				date: '',
				list: []
			};
		},
		onLoad() {
			this.getCurrentTime();
			this.getList();
		},
		methods: {
			toPlay(val){
				uni.navigateTo({
					url: '/pages/live/play?src='+val
				})
			},
			getList(){
				axiosLive('live/getLiveBackList', 'POST', {
					date: this.date
				}).then(res => {
					if (res.code == 0) {
						this.list = res.data
					}
				})
			},
			changeLog(e){
				this.date = e.detail.value
				this.page = 0;
				this.list = [];
				this.getList();
			},
			getCurrentTime(){
				let now = new Date();
				let year = now.getFullYear();
				let month = now.getMonth() + 1;
				let date = now.getDate();
				this.date = year + '-' + month;
			}
		}
	}
</script>

<style lang="scss">
page{
	padding-bottom: 80rpx;
}
.wp{
	padding: 10rpx 30rpx;
}
.his_tit{
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
}
.his_date{
	color: #999;
	image{
		width: 34rpx;
		margin-left: 6rpx;
	}
}
.his_list{
	margin-top: 30rpx;
	.his_time_tit{
		color: #666;
		font-size: 30rpx;
		margin-bottom: 20rpx;
	}
	.his_item{
		margin-bottom: 10rpx;
		&:last-child{
			.his_title{
				border-left: 2rpx dashed transparent;
			}
		}
	}
	.symbol{
		border: 2rpx solid #6c6c6c;
		padding: 2rpx;
		border-radius: 50%;
		width: 30rpx;
		height: 30rpx;
		margin-top: 6rpx;
		view{
			background: #6c6c6c;
			border-radius: 50%;
			width: 100%;
			height: 100%;
		}
	}
	.his_time{
		font-weight: bold;
		flex: 1;
		padding-left: 20rpx;
		font-size: 32rpx;
		color: #444;
	}
	.his_play{
		color: #4095e5;
		text-align: center;
		font-size: 20rpx;
		image{
			width: 40rpx;
		}
	}
	.his_title{
		border-left: 2rpx dashed #d4d4d4;
		min-height: 100rpx;
		margin-left: 12rpx;
		color: #999;
		margin-top: -20rpx;
		padding: 0 60rpx 0 30rpx;
	}
}
</style>
